<template>
    <div id="Roles">
        <my-breadcrumb/>
        <el-row class="main">
            <el-row>
                <el-col :span="6">
                    <el-button type="primary" size="small">添加角色</el-button>
                </el-col>
                <!-- <el-col :span="6">
                     <el-button type="primary" @click="handleColorfullLoading(1)">效果1</el-button>
                     <el-button type="primary" @click="handleLoading(9)">效果9</el-button>   
                </el-col> -->
            </el-row>
            <!-- 表格 -->
            <el-row style="margin-top:20px">
                <my-table-one :tableOptions='tableOptions' :tableData='tableData'>
                    <template #option='scope'>
                        <div>
                            <el-button type="primary" icon="el-icon-edit" size="mini" @click="handlyEdit(scope.slotData)">编辑</el-button>
                            <el-button class="margin-left-10" type="danger" icon="el-icon-delete" size="mini" @click="handlyDelete(scope.slotData)">删除</el-button>
                            <el-button type="warning" icon="el-icon-setting" size="mini" @click="handlyWarning(scope.slotData)">分配权限</el-button>
                            <my-dialog :btnOption='btnOption.jurisdictionBtn' :isShow.sync='jurisdictionIsshow'/>
                        </div>
                    </template> 
                    <!-- 显示对应权限 -->
                    <template #treeTags='scope'>
                        <div class="treeTags">
                            <tree-tags :childData='v' :slotData='scope.slotData' v-for="(v,i) in scope.slotData.children" :key="i"/>
                        </div>
                    </template> 
                </my-table-one>
            </el-row>
        </el-row>
    </div>
</template>
<script>
export default {
    
     name:'Roles',
     data() {
        return {
            tableOptions:[
                {prop:'roleName',label:'角色名称',width:'200'},
                {prop:'roleDesc',label:'角色描述',width:'200'},
                {prop:'option',label:'操作',width:'200',slot:'option'},
                {prop:'children',label:'',width:'200',type:'expand',slot:'treeTags'},
            ],
            tableData: [],
            btnOption:{
                jurisdictionBtn:{
                    txt:'分配权限',
                }
            },
            jurisdictionIsshow:false,
            handlyEdit(){},
            handlyDelete(){}
        }
    },
    methods: {
        //点击配置按钮
        handlyWarning(row){
            //点击弹出
            this.jurisdictionIsshow=true;
            //选择当前角色
            this.$store.commit('role/CHANGE_CURRENTROLES',row);
            //异步获取所有权限
            let type='tree';
            this.$store.dispatch('role/Acs_getAllRights',type)
            .then(res=>{
                 this.$store.commit('role/CHANGE_CHEACKED_KEYS',this.$store.getters['role/get_checked_keys']);   
            }).catch(err=>{})},
        //多彩层    
        handleColorfullLoading(index) {
            const Loading = this.$baseColorfullLoading(index)
            setTimeout(() => {
              Loading.close()
            }, 3000)},   
        /* //基础层 
        handleLoading(index) {
        const Loading = this.$baseLoading(index)
            setTimeout(() => {
              Loading.close()
            }, 3000)
      },  */
        
        
    },
    mounted(){
        //获取所有角色
        this.$store.dispatch('role/Acs_getAllRoles')
        .then(res=>{
            //console.log(res);
            this.tableData=res;
        })
        .catch(err=>{
            console.log(err);
        })
    }
    
}
</script>
<style lang="scss" scoped>
    #Roles{
        .main{
            margin-top: 15px;
            background: #fff;
            padding: 20px;
           
        }    
         .loading-container {
            ::v-deep {
              .el-button {
                margin-top: 10px;
                margin-right: 10px;
                margin-left: 0;
              }

            .el-button + .el-button {
              margin-right: 10px;
              margin-left: 0;
            }
    }
  }
    }
</style>